<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16">
      <a-col :md="24" :lg="16">
        <a-form :form="formUpdPwd">
          <a-form-item
            label="原密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input placeholder="请输入原密码" type="password" v-decorator="['password', {rules: [{required: true, message: '请输入原密码！'}]}]" />
          </a-form-item>
          <a-form-item
            label="新密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <!-- <a-input
              placeholder="请输入新密码"
              type="password"
              v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'},{
                validator: validateToNextPassword,
              },]}]" /> -->
            <a-input
              placeholder="请输入新密码"
              type="password"
              v-decorator="['newPassword', {rules: [{required: true, message: '请输入新密码！'}]}]" />
            <a-alert
              message="密码必须包含8到16位，同时包括大写，小写英语字母，数字和英语特殊符号!@#$%^&*_-"
              type="info"
              show-icon
            />
          </a-form-item>
          <a-form-item
            label="重复新密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            has-feedback
          >
            <a-input
              placeholder="请再次输入新密码"
              type="password"
              v-decorator="['confirm', {rules: [{required: true, message: '请再次输入新密码！'},
                                                {
                                                  validator: compareToFirstPassword,
                                                }]}]" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" @click="handleOkUpdPwd">
              确认修改
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import UpdPwd from './securityItem/updPwd'
  export default {
    components: {
      UpdPwd
    },
    data () {
      return {
        data: []
      }
    },
    created () {
      if (this.hasPerm('sysUser:updatePwd')) {
        const updPwdMenu = {
          title: '账户密码',
          description: '当前密码强度',
          value: '强',
          actions: { title: '修改',
            callback: () => {
              this.$refs.updPwd.open(this.userInfo.id)
            }
          }
        }
        this.data.push(updPwdMenu)
      }
      // const encryptedPhone = { title: '密保手机', description: '已绑定手机', value: '138****8293', actions: { title: '修改', callback: () => { this.$message.success('This is a message of success') } } }
      // const encryptedProblem = { title: '密保问题', description: '未设置密保问题，密保问题可有效保护账户安全', value: '', actions: { title: '设置', callback: () => { this.$message.error('This is a message of error') } } }
      // const encryptedEmail = { title: '备用邮箱', description: '已绑定邮箱', value: 'ant***sign.com', actions: { title: '修改', callback: () => { this.$message.warning('This is message of warning') } } }
      // const encryptedMfa = { title: 'MFA 设备', description: '未绑定 MFA 设备，绑定后，可以进行二次确认', value: '', actions: { title: '绑定', callback: () => { this.$message.info('This is a normal message') } } }
      // this.data.push(encryptedPhone)
      // this.data.push(encryptedProblem)
      // this.data.push(encryptedEmail)
      // this.data.push(encryptedMfa)
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
    }
  }
</script>

<style scoped>

</style>
